<template>
	<view class="top-nominate">
		<view class="already-challenge">
			<view class="level-ranking">
				<view class="next-level">
					<image :src="next_level_icon" style="width: 56upx;height: 56upx;margin-right: 10upx;"></image>
					<view>
						<text style="color: #00A66A;" v-if="isCurrent==1">我的等级</text>
						<text style="color: #00A66A;" v-else>下一等级</text>
						<text style="color: #666666;">{{next_grade}}</text>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="ranking-list" open-type="getUserInfo" withCredentials="true" lang="zh_CN"
				 @getuserinfo="rankingList">
					排行榜
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class="ranking-list" @click="toRankingList" withCredentials="true" lang="zh_CN"
				 @getuserinfo="rankingList">
					排行榜
				</button>
				<!-- #endif -->
			</view>
			<view style="margin-top: 26upx;">
				<image :src="challenge_photo" style="width: 650upx;height: 366upx;border-radius: 8upx;"></image>
			</view>
			
			<!-- #ifdef MP-WEIXIN -->
			<button class="already-start" open-type="getUserInfo" withCredentials="true" lang="zh_CN" v-if="is_can_jin==1"
			 @getuserinfo="answerInterface">
				开始挑战
			</button>
			<button class="already-start" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="seeMyGrade" v-if="is_can_jin==2">
				去看“我的成绩”
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="already-start"  @click="toAnswer" withCredentials="true" lang="zh_CN" v-if="is_can_jin==1"
			 @getuserinfo="answerInterface">
				开始挑战
			</button>
			<button class="already-start" @click="toWatchScore" withCredentials="true" lang="zh_CN" @getuserinfo="seeMyGrade" v-if="is_can_jin==2">
				去看“我的成绩”
			</button>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<button class="invite-challenge" open-type="share">
				邀请好友挑战
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="invite-challenge" @click="open_share_tip">
				邀请好友挑战
			</button>
			<!-- #endif -->
		</view>
		<view class="present-award-all">
			<view class="present-award-titl">
				<view @click="popupAward">
					<text style="vertical-align: middle;">本次奖励</text>
					<text>？</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="mtGainAward">
					我获得的奖励
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button @click="toMyReward" withCredentials="true" lang="zh_CN" @getuserinfo="mtGainAward">
					我获得的奖励
				</button>
				<!-- #endif -->
			</view>
			<view class="award">
				<view v-for="(one,index) in threeList" :key="index">
					<view>
						<image v-if="one.data.prize_img" :src="one.data.prize_img"></image>
						<view v-else class="noPrize">???</view>
					</view>
					<text v-if="one.data.prize">{{one.data.prize}}</text>
					<text v-else>敬请期待</text>
				</view>
				<view>
					<view style="padding: 12upx 30upx;box-sizing: border-box;">
						<image :src="achievement_icon" style="width: 88upx;height: 88upx;"></image>
					</view>
					<text>成就值</text>
				</view>
			</view>
		</view>
		<!-- 金榜题名奖励弹框 -->
		<uni-popup ref="popupRankingAward" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="close_popup" @click="closePopup"></image>
				<view class="popup_box_contain">
					<view>
						金榜题名奖励
					</view>
					<view class="popup_box_award_title">
						<text>排名</text>
						<text style="display: inline-block;margin-left: 200upx;">奖励</text>
					</view>
					<view class="popup_box_award">
						<view class="num_one" v-for="(one,index) in allList" :key="index">
							<view>
								{{one.name}}
							</view>
							<view class="num_one_award">
								<view class="no_award" v-if="!one.data.prize_img&&!one.data.prize">
									- -
								</view>
								<view v-else>
									<image :src="one.data.prize_img" v-if="one.data.prize_img"></image>
									<view v-else>???</view>
									<text>{{one.data.prize}}</text>
								</view>
								<view v-if="one.data.achievement_value">
									<image :src="achievement_icon"></image>
									<text>{{one.data.achievement_value}}</text>
								</view>
								<view class="no_award" v-else>
									- -
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		userLogin,
		login,
		testGet,
	} from '../../../common/login.js'
	import {
		everyWholeTime
	} from '@/common/util.js'
	export default {
		components: { uniPopup },
		onShareAppMessage(res) {
			if(this.$store.getters.getToken) {
				let data = {
					token: this.$store.getters.getToken,
					isNoNeedLoading: true
				}
				this.$api.add_jin_share(data).then(res=>{
					console.log('记录分享',res)
				}).catch(err => {
					console.log('记录分享',err)
				})
				return {
					title: this.shareData.share_copy,
					path: '/pages/home/topNominate/topNominate?share_id=' + this.$store.getters.getUserId+'&fromJin=1',
					imageUrl: this.shareData.img_src,
				}
			}
		},

		data() {
			return {
				next_grade: '中级火种',
				threeList: [],
				allList: [],
				next_level_icon: this.$store.state.imgUrl + 'img/nominate/next_level_icon.png',
				challenge_photo: this.$store.state.imgUrl + 'img/nominate/challenge-photo.png',
				advanced_lucky: this.$store.state.imgUrl + 'img/advanced_lucky.png',
				primary_lucky: this.$store.state.imgUrl + 'img/primary_lucky.png',
				achievement_icon: this.$store.state.imgUrl + 'img/nominate/achievement-icon.png',
				close_popup: this.$store.state.imgUrl + 'img/riddle/close_popup.png',
				share_id: this.$store.getters.getShareId,
				fromJin: this.$store.getters.getFormJin,
				is_can_jin: this.$store.getters.getCanJin ,//1可以答题，2不可以答题
				// 是否到十点了
				isNightTen: false,
				// 是否到六点了
				isSix: false,
				timeId: null,
				isCurrent: 1,//1显示当前等级，2显示下一等级
				shareData: {}
			}
		},
		onLoad(options) {
			if (options.share_id != undefined) {
				this.share_id = options.share_id
				this.fromJin = options.fromJin
				this.$store.commit('updataFromJin',this.fromJin)
				this.$store.commit('updataShareId', this.share_id)
				console.log('来自分享页面', options)
			}
		},
		onShow() {
			this.getShareInfo()
			this.getTime()
			this.getRewardList()
		},
		onHide() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		onUnload() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		methods: {
			getShareInfo() {
				let data ={
					token: this.$store.getters.getToken,
					isNoNeedLoading: true
				}
				this.$api.get_challenge_info(data).then(res=>{
					if(res.status) {
						this.shareData=res.data
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					//#ifdef H5
					this.H5share()
					//#endif
					console.log('获取信息',res)
				}).catch(err=>{
					console.log('获取信息',err)
				})
			},
			getTime(){
				this.timeId = setInterval(()=>{
					let a = new Date().getTime() - everyWholeTime('22')
					let b = new Date().getTime() - everyWholeTime('06')
					a > 0 ? this.isNightTen = true : this.isNightTen = false,
					b > 0 ? this.isSix = true : this.isSix = false
				},1000)
			},
			// 获取奖励列表
			getRewardList() {
				let data = {
					token: this.$store.getters.getToken
				}
				this.$api.get_reward(data).then(res => {
					if (res.status) {
						this.next_grade = res.name
						this.allList = res.data
						this.is_can_jin = res.is_can_jin
						this.threeList = res.data.slice(0, 3)
						this.isCurrent = res.isCurrent
					}
					console.log('获取奖励列表', res)
				}).catch(err => {
					console.log('获取奖励列表', err)
				})
			},
			// 去看我的成绩
			seeMyGrade() {
				let self = this
				uni.getSetting({
					success(res) {
						console.log(res)
						if (res.authSetting['scope.userInfo']) {
							if (self.$store.getters.getToken) {
								console.log('有token')
								uni.navigateTo({
									url: './answerComplete/answerComplete'
								})
							} else {
								console.log('没有token')
								userLogin(self.share_id,self.fromJin)
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 奖励弹框
			popupAward() {
				this.$refs.popupRankingAward.open()
			},
			closePopup() {
				this.$refs.popupRankingAward.close()
			},
			// 去答题
			answerInterface() {
				let self = this
				uni.getSetting({
					success(res) {
						console.log(res)
						if (res.authSetting['scope.userInfo']) {
							if (self.$store.getters.getToken) {
								console.log('有token')
								if(self.is_can_jin == 1&&self.isSix==true&&self.isNightTen==false) {
									uni.navigateTo({
										url: './answerInterface/answerInterface'
									})
								}else {
									uni.showToast({
										title: '挑战时间为6点-22点，明天再来吧！',
										icon: 'none',
										duration: 2000
									})
								}
							} else {
								console.log('没有token')
								userLogin(self.share_id,self.fromJin)
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 我获得的奖励
			mtGainAward() {
				let self = this
				uni.getSetting({
					success(res) {
						console.log(res)
						if (res.authSetting['scope.userInfo']) {
							if (self.$store.getters.getToken) {
								uni.navigateTo({
									url: './myGainAward/myGainAward'
								})
							} else {
								userLogin(self.share_id,self.fromJin)
								setTimeout(()=>{
									uni.navigateTo({
										url: './myGainAward/myGainAward'
									})
								},2000)
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})

			},
			// 排行榜
			rankingList() {
				let self = this
				uni.getSetting({
					success(res) {
						console.log(res)
						if (res.authSetting['scope.userInfo']) {
							if (self.$store.getters.getToken && self.is_can_jin == 1) { //可以答题
								uni.navigateTo({
									url: './rankingList/rankingList'
								})
							} else if (self.$store.getters.getToken && self.is_can_jin == 2) { //不可以答题了
								uni.navigateTo({
									url: './todayRankingList/todayRankingList'
								})
							} else {
								userLogin(self.share_id,self.fromJin)
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			
			// 跳转到‘我的成绩页面’
			toWatchScore(){
				if(this.$store.getters.getToken){
					uni.navigateTo({
						url: './answerComplete/answerComplete'
					})
				}else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 开始挑战-跳转到答题页面
			toAnswer(){
				if(this.$store.getters.getToken){
					uni.navigateTo({
						url: './answerInterface/answerInterface'
					})
				}else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
			},
			toRankingList(){
				if(this.$store.getters.getToken){
					uni.navigateTo({
						url: './todayRankingList/todayRankingList'
					})
				}else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
			},
			
			H5share(){
				if(this.$store.getters.getToken) {
					let data = {
						token: this.$store.getters.getToken,
						isNoNeedLoading: true
					}
					this.$api.add_jin_share(data).then(res=>{
						console.log('记录分享',res)
					}).catch(err => {
						console.log('记录分享',err)
					})
				}
				
				// H5分享
				let link=this.$store.state.H5URL+'pages/home/topNominate/topNominate?share_id=' + this.$store.getters.getUserId+'&fromJin=1'
				let share_detail = '这是金榜题名邀请好友挑战的分享详情'
				this.share(this.shareData.share_copy,share_detail, this.shareData.img_src,link=link)
			},
			
			open_share_tip(){
				this.$refs.shareTip.open();
			},
			
			toMyReward(){
				if(this.$store.getters.getToken){
					uni.navigateTo({
						url: './myGainAward/myGainAward'
					})
				}else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style>
	/* 金榜题名奖励弹框 */
	.popup_box_de {
		width: 590upx;
		height: 1094upx;
		position: relative;
		margin-top: -400upx;
	}

	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.popup_box_contain {
		width: 100%;
		height: 1022upx;
		background: linear-gradient(#FF6343, #F85F47);
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		padding: 46upx 20upx 30upx 20upx;
		box-sizing: border-box;
	}

	.popup_box_contain>view:first-child {
		text-align: center;
		color: #FFFFFF;
		font-size: 34upx;
		line-height: 48upx;
	}

	.popup_box_award {
		width: 100%;
		height: 786upx;
		background: #FFFFFF;
		border-bottom-left-radius: 16upx;
		border-bottom-right-radius: 16upx;
		padding: 28upx 16upx 0upx 10upx;
		box-sizing: border-box;
	}

	.popup_box_award_title {
		margin-top: 40upx;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(#FF8E47, #FF9941);
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;
		color: #FFFFFF;
		/* padding-top: 20upx; */
		padding-left: 30upx;
		box-sizing: border-box;
	}

	.num_one {
		width: 100%;
		height: 114upx;
		display: flex;
		margin-bottom: 12upx;
	}

	.num_one>view:first-child {
		width: 186upx;
		height: 100%;
		line-height: 114upx;
		color: #FFFFFF;
		font-size: 28upx;
		background: #FF8F47;
		border-top-left-radius: 16upx;
		border-bottom-left-radius: 16upx;
		padding-left: 20upx;
		box-sizing: border-box;
	}

	.num_one .num_one_award {
		width: 338upx;
		height: 100%;
		background: rgba(255, 0, 0, 0.09);
		border-top-right-radius: 16upx;
		border-bottom-right-radius: 16upx;
	}

	.num_one_award>view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.num_one_award>view:last-child>image {
		width: 60upx;
		height: 60upx;
	}

	.num_one_award>view:first-child image {
		width: 88upx;
		height: 62upx;
		border-radius: 4upx;
	}

	.num_one_award {
		display: flex;
		padding: 10upx 30upx 10upx 80upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.num_one_award>view:first-child>view {
		width: 80upx;
		height: 60upx;
		line-height: 60upx;
		background: #FFD8D8;
		border-radius: 4upx;
		color: #FF5C46;
		font-size: 34upx;
		text-align: center;
	}

	.num_one_award>view text {
		color: #666666;
		font-size: 24upx;
	}

	.no_award {
		line-height: 110upx;
		color: #FFB446;
		font-size: 28upx;
		text-align: center;
		width: 88upx;
		font-weight: 800;
	}

	page {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.top-nominate {
		width: 100%;
		height: 100%;
		background: url(https://lightplanet.tuanhaoke.cn/img/nominate/bg_img.png);
		background-size: 100% 100%;
		padding: 0 30upx;
		padding-top: 160upx;
		box-sizing: border-box;
	}

	.challenge-time {
		width: 422upx;
		height: 48upx;
		line-height: 48upx;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 8upx;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0 auto;
		text-align: center;
	}

	.already-challenge {
		width: 690upx;
		height: 752upx;
		background: #FFFFFF;
		margin-top: 34upx;
		border-radius: 16upx;
		box-shadow: 0 8upx 22upx 0 rgba(159, 4, 4, 0.73);
		padding: 32upx 20upx 30upx 20upx;
		box-sizing: border-box;
	}

	.level-ranking {
		display: flex;
		justify-content: space-between;
	}

	.next-level {
		display: flex;
		width: 200upx;
		height: 60upx;
		line-height: 29upx;
		background: rgba(0, 166, 106, 0.15);
		border-radius: 30upx;
		padding: 0upx 4upx;
		box-sizing: border-box;
	}

	.next-level text {
		display: block;
		font-size: 22upx;
	}

	.ranking-list {
		width: 144upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		background: linear-gradient(to right, #75EA00, #00A625);
		border-radius: 23upx;
		color: #FFFFFF;
		font-size: 28upx;
	}

	.already-start {
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 40upx;
		background: linear-gradient(#CBEC00, #00A66A);
		border-radius: 40upx;
		box-shadow: 0 8upx 16upx 0 rgba(85, 166, 0, 0.29);
		color: #FFFFFF;
		font-size: 30upx;
	}

	.invite-challenge {
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 40upx;
		border: 1px solid #00A66A;
		color: #00A66A;
		font-size: 30upx;
		border-radius: 40upx;
		background: none;
	}

	.present-award-all {
		width: 690upx;
		height: 322upx;
		background: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 40upx;
		margin-top: 30upx;
		border-radius: 16upx;
		box-shadow: 0 8upx 22upx 0 rgba(159, 4, 4, 0.73);
		padding: 20upx;
		box-sizing: border-box;
	}

	.present-award-titl {
		display: flex;
		justify-content: space-between;
	}

	.present-award-titl>view:first-child {
		color: #333333;
		font-size: 28upx;
		line-height: 40upx;
	}

	.present-award-titl>view:first-child>text:last-child {
		display: inline-block;
		width: 28upx;
		height: 28upx;
		line-height: 28upx;
		border-radius: 50%;
		background: #F2F2F2;
		margin-left: 10upx;
		vertical-align: middle;
		padding-left: 6upx;
		box-sizing: border-box;
	}

	.present-award-titl>button {
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(to right, #75EA00, #00A625);
		border-radius: 23upx;
		font-size: 28upx;
	}

	.award {
		margin-top: 40upx;
		display: flex;
		justify-content: space-between;
	}

	.award>view {
		width: 150upx;
		height: 152upx;
	}

	.award>view>view {
		width: 100%;
		height: 112upx;
		background: #FFD8D8;
	}

	.award>view>view>image {
		width: 100%;
		height: 100%;
	}

	.award .noPrize {
		line-height: 112upx;
		text-align: center;
		color: #FF5C46;
		font-size: 40upx;
	}

	.award>view>text {
		display: block;
		width: 100%;
		height: 40upx;
		background: #FFEAEA;
		line-height: 40upx;
		text-align: center;
		color: #666666;
		font-size: 24upx;
	}
	
	/* 分享提示 */
	.popup_box_de_share {
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share {
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;
		right: 10upx;
	}
	.popup_box_title {
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title > view:nth-child(2) {
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip {
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title > .line {
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #dedede;
		margin-top: 24upx;
	}
	.popup_box_de {
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content {
		width: 100%;
		height: 682upx;
		background: #ffffff;
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content > image {
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>
